<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-row type="flex">
        <el-col :span="12">
          <el-button type="primary" size="small" @click="addPages">添加页面</el-button>
        </el-col>
        <el-col :span="12">
          <el-row type="flex" justify="end">
            <el-input v-model="title_contains" placeholder="请输入关键字" @change="checkFn">
              <el-button slot="append" @click="checkFn">筛选</el-button>
            </el-input>

          </el-row>
        </el-col>
      </el-row>
    </div>
    <template>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="title"
          label="标题"
        />
        <el-table-column
          prop="content"
          label="内容"
        >
          <template v-slot="{row}">
            <div v-html="row.content" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-row>
              <el-button type="primary" size="small" @click="pageEdit(row.id)">编辑</el-button>
              <el-button type="danger" size="small" @click="pageDel(row.id)">删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 分页组件 -->
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :page-size="limit"
      @current-change="currPage"
    />
    <!-- 弹窗组件 -->
    <AddDialog
      ref="forms"
      :add-show-dialog.sync="ShowDialog"
      @addShowDialog="loadGetPagesList"
      @updateEvent="loadGetPagesList"
    />
  </el-card>
</template>

<script>
// 引入页面列表，页面数量,页面详情,删除页面接口
import { getPagesList, getPagesCount, PagesDetail, PagesDel } from '@/api/pages'
import AddDialog from './components/add-dialog.vue'

export default {
  components: {
    AddDialog
  },
  data() {
    return {
      tableData: [],
      title: '', // 标题
      content: '', // 内容
      limit: 2, // 每页的获取条数
      start: 0, // 开始获取的位置
      total: 0, // 总数
      ShowDialog: false, // 默认关闭弹窗
      title_contains: '' // 输入框搜索标题
    }
  },
  created() {
    // 列表渲染
    this.loadGetPagesList()
  },
  methods: {
    // 列表渲染功能
    async loadGetPagesList() {
      const res = await getPagesList({
        _limit: this.limit,
        _start: this.start,
        title_contains: this.title_contains
      })
      this.tableData = res.data
      // 获取页面数量
      const result = await getPagesCount({
        title_contains: this.title_contains
      })
      this.total = result.data
    },
    // 分页功能
    currPage(curpage) {
    //   console.log(81, curpage)
      this.start = curpage === 1 ? 0 : (curpage - 1) * this.limit
      // console.log(this.start)
      this.loadGetPagesList()
    },
    // 添加页面功能
    addPages() {
      this.ShowDialog = true
    },
    // 编辑页面功能
    async pageEdit(id) {
      this.ShowDialog = true
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.8)'
      })
      // 回填功能
      const res = await PagesDetail(id)
      this.$refs.forms.formData = res.data
      loading.close()
    },
    // 删除功能
    pageDel(id) {
      this.$confirm('是否要删除此页面', '删除', {
        type: 'warning'
      }).then(async() => {
        await PagesDel(id)
        this.loadGetPagesList()
      }).catch(() => {
        console.log('点击了取消按钮')
      })
    },
    // 筛选功能
    checkFn() {
      this.loadGetPagesList()
    }
    // async checkFn() {
    //   if (this.title_contains) {
    //     const result = await getPagesList({
    //       title_contains: this.title_contains
    //     })
    //     // console.log(139, result)
    //     this.tableData = result.data
    //     this.total = result.data.length
    //   } else {
    //     // 渲染列表
    //     this.loadGetPagesList()
    //     // 调用分页功能
    //     this.currPage()
    //   }
    // }
  }
}
</script>

<style lang="scss">
.el-card{
    margin-top: 20px;
    margin-left: 10px;
    width: 98%;
}

// 分页器
.el-pagination{
    text-align: center;
    margin-top: 20px;
}
// 加载器
.el-loading-mask{
  z-index: 99999 !important;
}
</style>
